import React from "react";
import {
    Space,
    Table,
} from 'antd'
import './style.less'
import { FIELD_TYPE_MAP } from "@/constant/icons";
import useDesignerStore from "@/store/Designer";
import { normalizeFieldType } from "@/utils/dataflow";

export const DataSourceResultField = ({
    datasource = [],
    onSelectionChange = (items) => { },
    selectedKeys = []
}) => {
    const { drawerHeight } = useDesignerStore()
    const columns = [
        {
            title: '字段名称',
            dataIndex: 'columnName',
            width: '40%',
        },
        {
            title: '字段类型',
            dataIndex: 'columnType',
            width: '20%',
            render: (_, record) => {
                const columnType = normalizeFieldType(record?.columnType)
                const TypeIcon = FIELD_TYPE_MAP[columnType]?.icon
                const TypeLabel = FIELD_TYPE_MAP[columnType]?.label
                return <Space>
                    {
                        TypeIcon
                    }
                    <span style={{ color: '#000000a6' }}>
                        {
                            TypeLabel
                        }
                    </span>
                </Space>
            }
        },
        {
            title: '字段描述',
            dataIndex: 'columnComment',
            width: '40%',
        }
    ];

    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: onSelectionChange
    }

    return <Table columns={columns}
        className="ds-table"
        dataSource={datasource}
        rowKey="columnName"
        size="small"
        rowSelection={rowSelection}
        scroll={{
            y: drawerHeight - 160
        }}
        pagination={false}
    />
}